<template>
  <div class="personcenter-info-wrap">
    <div class="edit-info-wrap">
      <div class="button-list">
        <p>{{ $t("身份") }}</p>
        <p class="tag" v-for="(item, index) in userInfo.groupName" :key="index">
          <span>{{ item }}</span>
        </p>
        <p
          class="left-button"
          v-if="!(userInfo.groupIds && userInfo.groupIds.includes(3))"
          @click="applyExpert('expert')"
        >
          {{ $t("申请专家") }}
        </p>
        <p
          class="left-button"
          v-if="!(userInfo.groupIds && userInfo.groupIds.includes(2))"
          @click="applyExpert('spreader')"
        >
          {{ $t("申请推广者") }}
        </p>
      </div>
      <div class="right-button" @click="updateInfo">
        {{ isUpdate ? $t("保存") : $t("修改资料") }}
      </div>
    </div>
    <div
      class="person-center-info-wrap"
      style="border-bottom: 0.03rem solid #dcdfe6"
    >
      <div class="info-item-wrap">
        <p class="info-title">{{ $t("头像") }}</p>
        <div class="head-info-box">
          <div class="head-box">
            <img :src="userInfo.avatar" alt="" />
          </div>
          <p @click="triggerFileInput" :class="{ disabled: !isUpdate }">
            {{ $t("更换头像")
            }}<input
              ref="fileInput"
              @change="handleFileChange"
              style="display: none"
              type="file"
              :disabled="!isUpdate"
            />
          </p>
        </div>
      </div>
      <!-- <div class="info-item-wrap">
        <p class="info-title">{{ $t("性别") }}</p>
        <div class="check-box-wrap">
          <div
            class="my-check-box-item"
            :class="{ active: userInfo.sex == item.id, disabled: !isUpdate }"
            v-for="(item, index) in sexList"
            :key="index"
          >
            <div class="check-box" @click="changeSex(item.id)">
              <i class="el-icon-check"></i>
            </div>
            <p class="check-label">{{ item.name }}</p>
          </div>
        </div>
      </div> -->
      <div class="info-item-wrap">
        <p class="info-title">{{ $t("昵称") }}</p>
        <el-input
          :placeholder="$t('请输入昵称')"
          v-model="userInfo.nickname"
          :disabled="!isUpdate"
        ></el-input>
      </div>
      <!-- <div class="info-item-wrap">
        <p class="info-title">{{ $t("体重") }}</p>
        <div>
          <el-input
            :placeholder="$t('请输入体重')"
            v-model="userInfo.weight"
            :disabled="!isUpdate"
          ></el-input>
          <p class="tips">kg</p>
        </div>
      </div>
      <div class="info-item-wrap">
        <p class="info-title">{{ $t("身高") }}</p>
        <div>
          <el-input
            :placeholder="$t('请输入')"
            v-model="userInfo.height"
            :disabled="!isUpdate"
          ></el-input>
          <p class="tips">cm</p>
        </div>
      </div>
      <div class="info-item-wrap">
        <p class="info-title">{{ $t("出生日期") }}</p>
        <el-date-picker
          :disabled="!isUpdate"
          style="width: 100%"
          v-model="userInfo.birthday"
          type="date"
          :placeholder="$t('选择日期')"
          value-format="timestamp"
        >
        </el-date-picker>
      </div> -->
      <div class="info-item-wrap" v-if="isExpert">
        <p class="info-title">{{ $t("擅长") }}</p>
        <el-input
          :placeholder="$t('请输入')"
          v-model="userInfo.skilledIn"
          :disabled="!isUpdate"
        ></el-input>
      </div>
      <!-- <div class="info-item-wrap">
        <p class="info-title">{{ $t("所在城市") }}</p>
        <tree-select
          v-model="userInfo.areaId"
          :data="treeData"
          :props="{ children: 'children', label: 'name' }"
          node-key="id"
          :disabled="!isUpdate"
        ></tree-select>
      </div> -->
      <div class="info-item-wrap" style="width: 100%" v-if="isExpert">
        <p class="info-title">{{ $t("简介") }}</p>
        <el-input
          :placeholder="$t('请输入')"
          v-model="userInfo.mark"
          :disabled="!isUpdate"
        ></el-input>
      </div>
    </div>
    <p class="person-form-title" style="margin-top: 1.78rem">
      {{ $t("基本信息") }}
    </p>
    <div class="person-center-info-wrap">
      <div class="info-item-wrap">
        <p class="info-title">
          {{ $t("手机号")
          }}<span class="left-button" @click="$refs['changePhoneDialog'].show()"
            >{{ userInfo.mobile ? $t("更换") : $t("绑定") }}</span
          >
        </p>
        <el-input
          :placeholder="$t('请输入')"
          disabled
          v-model="userInfo.mobile"
        ></el-input>
      </div>
      <div class="info-item-wrap">
        <p class="info-title">
          {{ $t("电子邮箱")
          }}<span class="left-button" @click="$refs['changeMailDialog'].show()"
            >{{ userInfo.mail ? $t("更换") : $t("绑定") }}</span
          >
        </p>
        <el-input
          :placeholder="$t('请输入')"
          disabled
          v-model="userInfo.mail"
        ></el-input>
      </div>
      <div class="info-item-wrap">
        <p class="info-title">
          {{ $t("账号密码")
          }}<span class="left-button" @click="$refs['setPwdDialog'].show()">{{
            $t("去设置")
          }}</span>
        </p>
        <el-input
          :placeholder="$t('请输入')"
          disabled
          type="password"
          :value="123456"
        ></el-input>
      </div>
      <div class="info-item-wrap">
        <p class="info-title">
          {{ $t("实名信息")
          }}<span
            class="left-button"
            v-if="!userInfo.certify"
            @click="$refs['certificationDialog'].show()"
            >{{ $t("去") }}{{ $t("绑定") }}</span
          >
        </p>
        <el-input
          disabled
          :placeholder="$t('请输入')"
          :value="certifyText"
        ></el-input>
      </div>
    </div>
    <setPwdDialog
      ref="setPwdDialog"
      :mobile="userInfo.mobile"
      :email="userInfo.mail"
    ></setPwdDialog>
    <changePhoneDialog
      ref="changePhoneDialog"
      @initPhone="getUserInfo"
    ></changePhoneDialog>
    <changeMailDialog
      ref="changeMailDialog"
      @initMail="getUserInfo"
    ></changeMailDialog>
    <shiminDialog
      ref="shiminDialog"
      @goToApply="$refs['certificationDialog'].show()"
    ></shiminDialog>
    <applyExpertDialog
      ref="applyExpertDialog"
      @initUserInfo="getUserInfo"
    ></applyExpertDialog>
    <certificationDialog
      ref="certificationDialog"
      @initCertification="getUserInfo"
    ></certificationDialog>
  </div>
</template>
<script>
import api2 from "@/api/utils";
import api from "@/api/personcenter";
import setPwdDialog from "./setPwdDialog.vue";
import changePhoneDialog from "./changePhoneDialog.vue";
import changeMailDialog from "./changeMailDialog.vue";
import shiminDialog from "./shiminDialog.vue";
import applyExpertDialog from "./applyExpertDialog.vue";
import certificationDialog from "./certificationDialog.vue";
export default {
  components: {
    setPwdDialog,
    changePhoneDialog,
    changeMailDialog,
    shiminDialog,
    applyExpertDialog,
    certificationDialog,
  },
  computed: {
    treeData() {
      return this.$store.state.areaTree;
    },
    isExpert() {
      return this.$store.getters.isExpert;
    },
    certifyText() {
      if (this.userInfo.certify) {
        return (
          this.userInfo.name.slice(0, 1) +
          "*" +
          "         " +
          this.userInfo.idNumber.slice(0, 3) +
          "*************"
        );
      } else {
        return "";
      }
    },
  },
  data() {
    return {
      selectedValue: "",
      isUpdate: false,
      userInfo: {},
      sexList: [
        {
          name: this.$t("男"),
          id: 1,
        },
        {
          name: this.$t("女"),
          id: 2,
        },
        {
          name: this.$t("其他"),
          id: 0,
        },
      ],
    };
  },
  mounted() {
    this.initUserInfo();
  },
  methods: {
    initUserInfo() {
      let userInfo = this.$store.state.userInfo;
      if (userInfo) {
        this.userInfo = JSON.parse(userInfo);
      }
    },
    applyExpert(type) {
      if (this.userInfo.certify) {
        this.$refs["applyExpertDialog"].show(type);
      } else {
        this.$refs["shiminDialog"].show();
      }
    },
    async updateInfo() {
      if (this.isUpdate) {
        const {
          nickname,
          avatar,
          sex,
          height,
          weight,
          birthday,
          areaId,
          mark,
          skilledIn,
        } = this.userInfo;
        let params = {
          nickname,
          avatar,
          sex,
          height,
          weight,
          birthday,
          areaId,
          mark,
          skilledIn,
        };
        let res = await this.$http.put(api.updateInfo, params);
        if (res && res.code == 0) {
          this.$message.success(this.$t("修改成功"));
          this.isUpdate = !this.isUpdate;
          this.getUserInfo();
        } else {
          this.$message.error(res.msg || this.$t("网络错误"));
        }
      } else {
        this.isUpdate = !this.isUpdate;
      }
    },
    async getUserInfo() {
      let res = await this.$http.get(api.getUserInfo);
      if (res && res.code == 0) {
        this.$store.commit("SET_USER", res.data);
        this.initUserInfo();
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
    changeSex(i) {
      if (this.isUpdate) {
        this.userInfo.sex = i;
      }
    },
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    async handleFileChange(e) {
      const file = e.target.files[0];
      if (file) {
        this.fileName = file.name;
        const formData = new FormData();
        formData.append("file", file);
        let res = await this.$http.post(api2.upload, formData);
        if (res && res.code == 0) {
          this.userInfo.avatar = res.data;
        } else {
          this.$message.error(res.msg || this.$t("网络错误"));
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.personcenter-info-wrap {
  padding-bottom: 4.44rem;
  .edit-info-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.83rem 0 12.27rem;
    margin-bottom: 1.06rem;
    .button-list {
      display: flex;
      align-items: center;
      p {
        font-size: 0.89rem;
        color: #666666;
        margin-right: 0.89rem;
      }
      .tag {
        line-height: 1.11rem;
        padding: 0 0.22rem;
        background: #339694;
        border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
        color: #fff;
        font-size: 0.67rem;
      }
      .left-button {
        color: #339eff;
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .right-button {
      padding: 0.78rem 1.67rem;
      border-radius: 4.56rem 4.56rem 4.56rem 4.56rem;
      border: 0.06rem solid #339eff;
      font-weight: bold;
      font-size: 0.89rem;
      color: #339eff;
      line-height: 1.56rem;
      text-decoration-line: underline;
      cursor: pointer;
    }
  }
  .person-center-info-wrap {
    width: 38.92rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 12.27rem;
    width: 100%;

    .info-item-wrap {
      width: 16.67rem;
      margin-bottom: 1.78rem;
      .info-title {
        font-size: 0.89rem;
        color: #666666;
        line-height: 1.56rem;
        margin-bottom: 0.44rem;
      }
      .left-button {
        color: #339eff;
        text-decoration: underline;
        float: right;
        cursor: pointer;
      }
      .tips {
        position: absolute;
        right: 1rem;
        top: 1rem;
        font-size: 0.89rem;
        color: #425f9b;
      }
    }
    .check-box-wrap {
      display: flex;
      align-items: center;
    }
    .head-info-box {
      display: flex;
      align-items: center;
      .head-box {
        width: 3.56rem;
        height: 3.56rem;
        border-radius: 2rem;
        overflow: hidden;
        margin-right: 1.22rem;
      }
      img {
        width: 100%;
        height: 100%;
      }
      p {
        font-weight: 500;
        font-size: 0.89rem;
        color: #425f9b;
        text-decoration: underline;
        cursor: pointer;
        &.disabled {
          cursor: not-allowed;
        }
      }
    }
  }
  .person-form-title {
    font-weight: bold;
    font-size: 1.33rem;
    color: #333333;
    margin-bottom: 1.78rem;
    padding-left: 12.27rem;
  }
}
</style>
<style lang="scss">
.personcenter-info-wrap {
  .el-input {
    .el-input__inner {
      width: 100%;
      border-color: #425f9b;
      height: 3.56rem;
      font-size: 0.89rem;
      background: transparent;
    }
    &.is-disabled input {
      color: #333;
    }
  }
}
</style>
